<script lang="ts" setup>
import { ElButton, ElTableColumn, ElTable } from 'element-plus';
import Header from '@/views/content/util/header.vue'
import { onMounted, ref } from 'vue'
import { chargeListApi } from '@/apis/productApi'
//组件
import Limit from '@/views/content/util/limit.vue'
import IButton from "@/views/content/util/button/iButton.vue"
import OButton from "@/views/content/util/button/oButton.vue"



const getLimitItemList = (displayedItemList: Array<Object>) => {
    // console.log("接收：")
    // console.log(displayedItemList)
    limitItemList.value = displayedItemList
}

const itemList = ref([])
const limitItemList = ref([])
onMounted(async () => {
    const res = await chargeListApi()
    itemList.value = res.data

})
</script>

<template>
    <div style="width: 97%;">
        <Header title="商品加料"></Header>
        <div>

            <div>
                <IButton title="添加加料" type="add"></IButton>
                <IButton title="导入加料" type="in"></IButton>
                <IButton title="导出加料" type="out"></IButton>
            </div>
            <div style="margin-top: 1.5%;">
                <el-table :data="limitItemList" :row-key="row => row.id"
                    :header-cell-style="{background:'rgb(243, 243, 243)',color:'#606266'}"
                    >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column label="排序" prop="sort" width="100px"></el-table-column>
                    <el-table-column label="ID" prop="id"></el-table-column>
                    <el-table-column label="加料名称" prop="name"></el-table-column>
                    <el-table-column label="价格" prop="price"></el-table-column>
                    <el-table-column label="启用状态" prop="status">
                        <template #default="{ row }">
                            <el-switch v-model="row.status" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" prop="">
                        <template #default="{ row }">
                            <div class="button-container">
                                        <el-tooltip content="编辑" placement="top">
                                            <OButton></OButton>
                                         
                                        </el-tooltip>
                                        <el-tooltip content="删除" placement="top">
                                            <OButton type="delete"></OButton>
                                        </el-tooltip>
                                    </div>
                        </template>
                    </el-table-column>

                </el-table>
            </div>

            <div>
                <Limit :itemList="itemList" @updateItemList="getLimitItemList" />
            </div>




        </div>
    </div>
</template>
<style scoped>
::v-deep .el-table th>.cell {
    color: black;
}

.caozuo-button {
    width: 30px;
    height: 15px;
    font-size: 10px;
}
</style>